<template>
	<view class="cardHolderWp">
		<view class="searchBox">
			<u--input border="none" placeholder="请输入要查询的人脉" prefixIcon="search"
				prefixIconStyle="font-size: 40rpx;color: #86909C" @change="searchChange" v-model="searchVal"
				@confirm="searchChange" placeholderStyle="background-color:#F7F8FA;height: 72rpx;">
			</u--input>
		</view>
		<view class="queryWp">
			<view class="itemWp" v-for="(item,index) in queryBtn" :key="index">
				<u-button shape="circle" size='mini' :plain="actionIndex==index?false:true" color='#7B77FE'
					@click="tapQueryBtn(item,index)">{{item.title}}</u-button>
			</view>
		</view>
		<u-line margin="15rpx 0"></u-line>
		<view class="addressListWp" v-if="indexList.length>0">
			<cardHolderIndexList v-if="isChange==false" :indexList='indexList' @showMore='showMore'
				@goToDetail='goToDetail'>
			</cardHolderIndexList>
			<cardHolderMoreList v-if="isChange==true" :list="queryList" @goToDetail='goToDetail'></cardHolderMoreList>
		</view>
		<view class="" v-if="indexList.length==0">
			<u-empty text="未查询到数据" mode="data" iconSize="100" textSize="32rpx" marginTop="20rpx"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import cardHolderIndexList from '@/pagesCard/components/cardHolderIndexList/cardHolderIndexList.vue'
	import cardHolderMoreList from '@/pagesCard/components/cardHolderMoreList/cardHolderMoreList.vue'
	export default {
		components: {
			cardHolderIndexList,
			cardHolderMoreList,
		},
		data() {
			return {
				openId: '',
				searchVal: '',
				queryBtn: [{
						title: '我的人脉'
					},
					{
						title: '收藏'
					},
					{
						title: '最近添加'
					},
				],
				actionIndex: 0,
				moreList: [],
				indexList: [],
				queryList: [],
				isChange: false,
				newFriendList: []
			};
		},
		onLoad() {
			// this.queryDefaultCard()
		},
		onShow() {
			this.queryDefaultCard()
			this.queryNewFriendList()
		},
		computed: {
			...mapGetters(['userInfo']),
			newFriendNum() {
				let arr = this.newFriendList.filter(item => {
					return item.status == 0
				})
				if (arr) {
					return arr.length
				}
				return ''
			}
		},
		methods: {
			// 查询新增好友
			async queryNewFriendList() {
				let data = uni.getStorageSync('openId')
				if (data.openid) {
					this.openId = data.openid
				}
				let payload = {
					openId: this.openId,
					pageNo: 1,
					pageSize: 90
				}
				let res = await this.$api.queryNewFriendList(payload)
				if (res.success) {
					this.newFriendList = res.result.records.filter(item => {
						return item.status == 0
					})
					console.log(this.newFriendList, '查询新增好友');
				} else {
					this.newFriendList = []
				}
			},
			async queryDefaultCard() {
				let data = uni.getStorageSync('openId')
				if (data.openid) {
					this.openId = data.openid
				}
				let res = await this.$api.queryDefaultCard({
					openId: this.openId
				})
				if (res.success) {
					this.indexList = res.result
				} else {
					uni.showToast({
						title: '查询失败',
						icon: 'none'
					});
					this.indexList = []
				}

			},
			checkUserInfo() {
				if (this.userInfo.id) {
					return true
				} else {
					uni.showToast({
						title: '请先创建您的名片',
						icon: 'none'
					});
					return false
				}
			},
			tapQueryBtn(item, index) {
				this.actionIndex = index
				if (this.checkUserInfo()) {
					switch (index) {
						case 0:
							this.isChange = false
							this.queryDefaultCard()
							break;
						case 1:
							this.isChange = true
							this.queryCollectCardList()
							break;

						case 2:
							this.isChange = true
							this.queryRecentAddCardList()
							break;
						default:
							this.isChange = false
							break;
					}
				}

			},
			//查询收藏通讯录list
			async queryCollectCardList() {
				let res = await this.$api.queryCollectCard({
					openId: this.openId
				})
				if (res.success) {
					this.queryList = res.result
					// console.log('查询收藏通讯录list', res.result);
				} else {
					uni.showToast({
						title: '未查询到相关数据',
						icon: 'none'
					});
					this.queryList = []
				}
			},
			//查询最近添加的list
			async queryRecentAddCardList() {
				let res = await this.$api.queryRecentAddCard({
					openId: this.openId
				})
				if (res.success) {
					this.queryList = res.result
					// console.log('查询最近添加的list', res.result);
				} else {
					uni.showToast({
						title: '未查询到相关数据',
						icon: 'none'
					});
					this.queryList = []
				}
			},
			//查询最近使用list
			async queryRecentCardList() {
				let res = await this.$api.queryRecentCard({
					openId: this.openId
				})
				if (res.success) {
					this.queryList = res.result
					// console.log('查询近期使用的list', res.result);
				} else {
					uni.showToast({
						title: '未查询到相关数据',
						icon: 'none'
					});
					this.queryList = []
				}
			},
			//模糊搜索
			async searchChange() {
				this.isChange = true
				let res = await this.$api.queryCardByCondition({
					openId: this.openId,
					name: this.searchVal
				})
				if (res.success) {
					this.queryList = res.result
				} else {
					this.isChange = false
					this.queryDefaultCard()
					uni.showToast({
						title: '查询失败',
						icon: 'none'
					});
				}
			},
			//添加好友
			addFriend() {
				if (this.checkUserInfo()) {
					uni.navigateTo({
						url: '/pagesCard/addBuddy/addBuddy'
					})
				}

			},
			//好友申请列表
			goToFriendList() {
				if (this.checkUserInfo()) {
					uni.navigateTo({
						url: '/pagesCard/friendList/friendList'
					})
				}

			},


			goToDetail(item, index) {
				uni.navigateTo({
					url: "/pagesCard/personDetail/personDetail?item=" +
						encodeURIComponent(JSON.stringify(item)),
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.addressListWp {
		height: 100%;
		width: 100%;
		padding-bottom: 280rpx;
	}

	.cardHolderWp {
		min-height: 100vh;
		padding: 0 30upx;


		.searchBox {
			margin: 20rpx 0;
			padding: 0 20rpx;
			height: 72rpx;
			background-color: #F7F8FA;
			display: flex;
			align-items: center;
		}

		.queryWp {
			padding-top: 15upx;
			display: flex;

			.itemWp {
				margin: 20upx 0;
				margin-right: 30upx;
			}
		}

		.addFriendWp {
			// width: 300upx;
			display: flex;

			.imgWp {
				width: 50upx;
				height: 50upx;
				background-color: #423BFE;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10upx;


				img {
					width: 30upx;
					height: 30upx;
				}
			}

			.textWp {
				margin-left: 30upx;
				font-size: 30upx;
				font-weight: 400;
				color: #333333;

				.newFriendNum {
					background-color: #fff;
					border-radius: 50%;
					margin-left: 30upx;
					color: red;
					font-size: 26upx;
					font-weight: 600;
				}
			}
		}

		.scrollWp {
			height: 50vh;
			overflow: auto;
		}
	}
</style>